/**
 * 响应式测试组件
 * 用于测试和展示响应式设计效果
 */

import React, { useState, useEffect } from 'react';
import { Card, Row, Col, Typography, Button, Table, Form, Input, Select, Space, Alert, Divider, Tag } from 'antd';
import { MobileOutlined, TabletOutlined, DesktopOutlined, ExpandOutlined } from '@ant-design/icons';
import { useTheme } from '../contexts/ThemeContext';

const { Title, Paragraph, Text } = Typography;
const { Option } = Select;

interface ScreenSize {
  width: number;
  height: number;
  type: 'mobile' | 'tablet' | 'desktop' | 'large';
  name: string;
}

const ResponsiveTest: React.FC = () => {
  const { currentTheme } = useTheme();
  const [currentSize, setCurrentSize] = useState<ScreenSize>({
    width: window.innerWidth,
    height: window.innerHeight,
    type: 'desktop',
    name: '桌面端'
  });

  // 预定义的屏幕尺寸
  const screenSizes: ScreenSize[] = [
    { width: 375, height: 667, type: 'mobile', name: 'iPhone SE' },
    { width: 414, height: 896, type: 'mobile', name: 'iPhone 11' },
    { width: 768, height: 1024, type: 'tablet', name: 'iPad' },
    { width: 1024, height: 768, type: 'tablet', name: 'iPad 横屏' },
    { width: 1366, height: 768, type: 'desktop', name: '笔记本' },
    { width: 1920, height: 1080, type: 'large', name: '桌面显示器' },
  ];

  // 监听窗口大小变化
  useEffect(() => {
    const handleResize = () => {
      const width = window.innerWidth;
      const height = window.innerHeight;
      
      let type: ScreenSize['type'] = 'desktop';
      let name = '自定义尺寸';
      
      if (width < 576) {
        type = 'mobile';
        name = '手机端';
      } else if (width < 768) {
        type = 'mobile';
        name = '大屏手机';
      } else if (width < 992) {
        type = 'tablet';
        name = '平板端';
      } else if (width < 1200) {
        type = 'desktop';
        name = '小屏桌面';
      } else {
        type = 'large';
        name = '大屏桌面';
      }
      
      setCurrentSize({ width, height, type, name });
    };

    handleResize();
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  // 获取屏幕类型图标
  const getScreenIcon = (type: ScreenSize['type']) => {
    switch (type) {
      case 'mobile':
        return <MobileOutlined />;
      case 'tablet':
        return <TabletOutlined />;
      case 'desktop':
        return <DesktopOutlined />;
      case 'large':
        return <ExpandOutlined />;
      default:
        return <DesktopOutlined />;
    }
  };

  // 获取屏幕类型颜色
  const getScreenColor = (type: ScreenSize['type']) => {
    switch (type) {
      case 'mobile':
        return '#52c41a';
      case 'tablet':
        return '#1890ff';
      case 'desktop':
        return '#722ed1';
      case 'large':
        return '#eb2f96';
      default:
        return '#666';
    }
  };

  // 测试数据
  const testData = [
    { key: '1', name: '张三', age: 28, city: '北京', phone: '13800138000' },
    { key: '2', name: '李四', age: 32, city: '上海', phone: '13800138001' },
    { key: '3', name: '王五', age: 25, city: '广州', phone: '13800138002' },
    { key: '4', name: '赵六', age: 30, city: '深圳', phone: '13800138003' },
  ];

  // 表格列配置
  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
      responsive: ['xs', 'sm', 'md', 'lg', 'xl'] as any,
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
      responsive: ['sm', 'md', 'lg', 'xl'] as any,
    },
    {
      title: '城市',
      dataIndex: 'city',
      key: 'city',
      responsive: ['md', 'lg', 'xl'] as any,
    },
    {
      title: '电话',
      dataIndex: 'phone',
      key: 'phone',
      responsive: ['lg', 'xl'] as any,
    },
  ];

  return (
    <div>
      {/* 当前屏幕信息 */}
      <Alert
        message={
          <Space>
            {getScreenIcon(currentSize.type)}
            <Text strong>当前屏幕：{currentSize.name}</Text>
            <Text type="secondary">
              {currentSize.width} × {currentSize.height}
            </Text>
            <Tag color={getScreenColor(currentSize.type)}>
              {currentSize.type.toUpperCase()}
            </Tag>
          </Space>
        }
        type="info"
        style={{ marginBottom: 16 }}
      />

      {/* 响应式网格测试 */}
      <Card title="响应式网格系统测试" style={{ marginBottom: 16 }}>
        <Paragraph type="secondary">
          以下网格会根据屏幕尺寸自动调整布局：
        </Paragraph>
        
        <Row gutter={[16, 16]}>
          <Col xs={24} sm={12} md={8} lg={6} xl={4}>
            <Card size="small" style={{ textAlign: 'center', background: '#f0f2f5' }}>
              <Text strong>列 1</Text>
              <br />
              <Text type="secondary">xs:24 sm:12 md:8 lg:6 xl:4</Text>
            </Card>
          </Col>
          <Col xs={24} sm={12} md={8} lg={6} xl={4}>
            <Card size="small" style={{ textAlign: 'center', background: '#e6f7ff' }}>
              <Text strong>列 2</Text>
              <br />
              <Text type="secondary">xs:24 sm:12 md:8 lg:6 xl:4</Text>
            </Card>
          </Col>
          <Col xs={24} sm={12} md={8} lg={6} xl={4}>
            <Card size="small" style={{ textAlign: 'center', background: '#f6ffed' }}>
              <Text strong>列 3</Text>
              <br />
              <Text type="secondary">xs:24 sm:12 md:8 lg:6 xl:4</Text>
            </Card>
          </Col>
          <Col xs={24} sm={12} md={8} lg={6} xl={4}>
            <Card size="small" style={{ textAlign: 'center', background: '#fff2e8' }}>
              <Text strong>列 4</Text>
              <br />
              <Text type="secondary">xs:24 sm:12 md:8 lg:6 xl:4</Text>
            </Card>
          </Col>
          <Col xs={24} sm={12} md={8} lg={6} xl={4}>
            <Card size="small" style={{ textAlign: 'center', background: '#f9f0ff' }}>
              <Text strong>列 5</Text>
              <br />
              <Text type="secondary">xs:24 sm:12 md:8 lg:6 xl:4</Text>
            </Card>
          </Col>
          <Col xs={24} sm={12} md={8} lg={6} xl={4}>
            <Card size="small" style={{ textAlign: 'center', background: '#fff0f6' }}>
              <Text strong>列 6</Text>
              <br />
              <Text type="secondary">xs:24 sm:12 md:8 lg:6 xl:4</Text>
            </Card>
          </Col>
        </Row>
      </Card>

      {/* 响应式表格测试 */}
      <Card title="响应式表格测试" style={{ marginBottom: 16 }}>
        <Paragraph type="secondary">
          表格列会根据屏幕尺寸自动显示/隐藏：
        </Paragraph>
        <Table
          columns={columns}
          dataSource={testData}
          pagination={false}
          size="small"
          scroll={{ x: 'max-content' }}
        />
      </Card>

      {/* 响应式表单测试 */}
      <Card title="响应式表单测试" style={{ marginBottom: 16 }}>
        <Form layout="vertical">
          <Row gutter={16}>
            <Col xs={24} sm={12} md={8}>
              <Form.Item label="姓名" name="name">
                <Input placeholder="请输入姓名" />
              </Form.Item>
            </Col>
            <Col xs={24} sm={12} md={8}>
              <Form.Item label="年龄" name="age">
                <Input placeholder="请输入年龄" />
              </Form.Item>
            </Col>
            <Col xs={24} sm={24} md={8}>
              <Form.Item label="城市" name="city">
                <Select placeholder="请选择城市">
                  <Option value="beijing">北京</Option>
                  <Option value="shanghai">上海</Option>
                  <Option value="guangzhou">广州</Option>
                  <Option value="shenzhen">深圳</Option>
                </Select>
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Col xs={24} sm={12} md={8}>
              <Form.Item>
                <Button type="primary" block>
                  提交
                </Button>
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Card>

      {/* 屏幕尺寸参考 */}
      <Card title="屏幕尺寸参考">
        <Row gutter={16}>
          {screenSizes.map((size, index) => (
            <Col xs={24} sm={12} md={8} lg={6} key={index}>
              <Card size="small" style={{ marginBottom: 8 }}>
                <Space>
                  {getScreenIcon(size.type)}
                  <div>
                    <Text strong>{size.name}</Text>
                    <br />
                    <Text type="secondary">{size.width} × {size.height}</Text>
                  </div>
                </Space>
              </Card>
            </Col>
          ))}
        </Row>
      </Card>
    </div>
  );
};

export default ResponsiveTest;
